<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>JavaScript知识点总结(十二.JavaScript之DOM事件流高级) | 小何blog (记录美好)</title><meta name="keywords" content="系列🏬,JavaScript,DOM,事件流"><meta name="author" content="六根清静"><meta name="copyright" content="六根清静"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="description" content="javascript操作CSS称为脚本化CSS，而javascript与HTML的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript知识点总结(十二.JavaScript之DOM事件流高级)">
<meta property="og:url" content="https://liugenqingjing2.coding.me/2020/09/19/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-%E5%8D%81%E4%BA%8C-JavaScript%E4%B9%8BDOM%E4%BA%8B%E4%BB%B6%E6%B5%81%E9%AB%98%E7%BA%A7/index.html">
<meta property="og:site_name" content="小何blog (记录美好)">
<meta property="og:description" content="javascript操作CSS称为脚本化CSS，而javascript与HTML的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，而事件流(又叫事件传播)描述的是从页面中接收事件的顺序。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/y20guKZQbANB.jpg">
<meta property="article:published_time" content="2020-09-19T02:20:03.000Z">
<meta property="article:modified_time" content="2021-01-10T12:15:10.978Z">
<meta property="article:author" content="六根清静">
<meta property="article:tag" content="系列🏬">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="DOM">
<meta property="article:tag" content="事件流">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/y20guKZQbANB.jpg"><link rel="shortcut icon" href="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200907/wOu*ZmuVb5A4.png"><link rel="canonical" href="https://liugenqingjing2.coding.me/2020/09/19/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-%E5%8D%81%E4%BA%8C-JavaScript%E4%B9%8BDOM%E4%BA%8B%E4%BB%B6%E6%B5%81%E9%AB%98%E7%BA%A7/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//hm.baidu.com"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin="crossorigin"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?e829919a4d931d733ee74d5d97a51582";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap"><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":20,"languages":{"author":"作者: 六根清静","link":"链接: ","source":"来源: 小何blog (记录美好)","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  ClickShowText: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  justifiedGallery: {
    js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
    css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: true
};

var saveToLocal = {
  set: function setWithExpiry(key, value, ttl) {
    const now = new Date()
    const expiryDay = ttl * 86400000
    const item = {
      value: value,
      expiry: now.getTime() + expiryDay,
    }
    localStorage.setItem(key, JSON.stringify(item))
  },

  get: function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key)

    if (!itemStr) {
      return undefined
    }
    const item = JSON.parse(itemStr)
    const now = new Date()

    if (now.getTime() > item.expiry) {
      localStorage.removeItem(key)
      return undefined
    }
    return item.value
  }
}</script><script id="config_change">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-01-10 20:15:10'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(function () {  window.activateDarkMode = function () {
    document.documentElement.setAttribute('data-theme', 'dark')
    if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
    }
  }
  window.activateLightMode = function () {
    document.documentElement.setAttribute('data-theme', 'light')
   if (document.querySelector('meta[name="theme-color"]') !== null) {
      document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
    }
  }
  const autoChangeMode = '2'
  const t = saveToLocal.get('theme')
  if (autoChangeMode === '1') {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
    const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
    const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
    const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
    if (t === undefined) {
      if (isLightMode) activateLightMode()
      else if (isDarkMode) activateDarkMode()
      else if (isNotSpecified || hasNoSupport) {
        const now = new Date()
        const hour = now.getHours()
        const isNight = hour <= 6 || hour >= 18
        isNight ? activateDarkMode() : activateLightMode()
      }
      window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
        if (saveToLocal.get('theme') === undefined) {
          e.matches ? activateDarkMode() : activateLightMode()
        }
      })
    } else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else if (autoChangeMode === '2') {
    const now = new Date()
    const hour = now.getHours()
    const isNight = hour <= 6 || hour >= 18
    if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
    else if (t === 'light') activateLightMode()
    else activateDarkMode()
  } else {
    if (t === 'dark') activateDarkMode()
    else if (t === 'light') activateLightMode()
  }const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
   if (asideStatus === 'hide') {
     document.documentElement.classList.add('hide-aside')
   } else {
     document.documentElement.classList.remove('hide-aside')
   }
}})()</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css"><link rel="stylesheet" href="/css/shuo.css"/><link rel="stylesheet" href="/magnetcss/magnet.css"/><link rel="stylesheet" href="/css/calendar.css"/><link rel="stylesheet" href="//at.alicdn.com/t/font_2060620_l0j6b710zk.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/macblack.css"><link rel="stylesheet" href="/css/change.css"><link rel="stylesheet" href="/news/css/news.css"/><style type="text/css">#toggle-sidebar {bottom: 80px}</style><link rel="stylesheet" href="/magnet/css/catalogMagnet.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.css"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/iconfont.min.css"><link rel="stykesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/pool.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/><link rel="stylesheet" href="/zan/zan.css"><link rel="stylesheet" href="/swiper/swiper.min.css"><link rel="stylesheet" href="/swiper/swiperstyle.css"><style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite; -ms-animation: avatar_turn_around 1s linear infinite; animation: avatar_turn_around 1s linear infinite; }</style><meta name="generator" content="Hexo 5.0.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="wizard-scene"><div class="wizard-objects"><div class="wizard-square"></div><div class="wizard-circle"></div><div class="wizard-triangle"></div></div><div class="wizard"><div class="wizard-body"></div><div class="wizard-right-arm"><div class="wizard-right-hand"></div></div><div class="wizard-left-arm"><div class="wizard-left-hand"></div></div><div class="wizard-head"><div class="wizard-beard"></div><div class="wizard-face"><div class="wizard-adds"></div></div><div class="wizard-hat"><div class="wizard-hat-of-the-hat"></div><div class="wizard-four-point-star --first"></div><div class="wizard-four-point-star --second"></div><div class="wizard-four-point-star --third"></div></div></div></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="http://01.027cgb.com/632500/1576904533264.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">138</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">63</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/stars/"><i class="fa-fw fas fa-star faa-shake animated-hover"></i><span> 收藏网址</span></a></div><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-zhuye faa-shake animated-hover"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/blog.html"><i class="fa-fw iconfont icon-Artboard faa-shake animated-hover"></i><span> 博客</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-guidang faa-shake animated-hover"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian faa-shake animated-hover"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-yule1"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/movies/"><i class="fa-fw iconfont icon-yingshi faa-shake animated-hover"></i><span> 影视</span></a></li><li><a class="site-page" href="/games/"><i class="fa-fw iconfont icon-youxi1 faa-shake animated-hover"></i><span> 游戏</span></a></li><li><a class="site-page" href="/galleryGroup"><i class="fa-fw iconfont icon-tuku faa-shake animated-hover"></i><span> 图库</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/messagepad/"><i class="fa-fw iconfont icon-ziyuan6 faa-shake animated-hover"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-icon_xinyong_xianxing_jijin- faa-shake animated-hover"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-guanyuwomen faa-shake animated-hover"></i><span> 关于我</span></a></div></div></div></div><div id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/y20guKZQbANB.jpg)"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">小何blog (记录美好)</a></span><span id="menus"><div id="search_button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/stars/"><i class="fa-fw fas fa-star faa-shake animated-hover"></i><span> 收藏网址</span></a></div><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-zhuye faa-shake animated-hover"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/blog.html"><i class="fa-fw iconfont icon-Artboard faa-shake animated-hover"></i><span> 博客</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-guidang faa-shake animated-hover"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian faa-shake animated-hover"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw iconfont icon-yule1"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/movies/"><i class="fa-fw iconfont icon-yingshi faa-shake animated-hover"></i><span> 影视</span></a></li><li><a class="site-page" href="/games/"><i class="fa-fw iconfont icon-youxi1 faa-shake animated-hover"></i><span> 游戏</span></a></li><li><a class="site-page" href="/galleryGroup"><i class="fa-fw iconfont icon-tuku faa-shake animated-hover"></i><span> 图库</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/messagepad/"><i class="fa-fw iconfont icon-ziyuan6 faa-shake animated-hover"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-icon_xinyong_xianxing_jijin- faa-shake animated-hover"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-guanyuwomen faa-shake animated-hover"></i><span> 关于我</span></a></div></div><span class="close" id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></span></span></nav><div id="post-info"><h1 class="post-title">JavaScript知识点总结(十二.JavaScript之DOM事件流高级)</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-09-19T02:20:03.000Z" title="发表于 2020-09-19 10:20:03">2020-09-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-01-10T12:15:10.978Z" title="更新于 2021-01-10 20:15:10">2021-01-10</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/">前端学习</a></span></div><div class="meta-secondline"> <span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>10分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="事件高级："><a href="#事件高级：" class="headerlink" title="事件高级："></a>事件高级：</h1><ul>
<li><p>##　注册事件（绑定事件）：</p>
<ul>
<li><h3 id="注册事件概述"><a href="#注册事件概述" class="headerlink" title="注册事件概述:"></a>注册事件概述:</h3><ul>
<li>给元素添加事件，称为<strong>注册事件或者绑定事件</strong>。</li>
<li>注册事件有两种方式：<strong>传统方式和方法监听注册方式</strong></li>
</ul>
<h4 id="传统注册方式"><a href="#传统注册方式" class="headerlink" title="传统注册方式:"></a>传统注册方式:</h4><ul>
<li>利用 <code>on</code> 开头的事件 <code>onclick </code></li>
<li><code>&lt;button onclick=“alert(&#39;hi~&#39;)”&gt;&lt;/button&gt;</code></li>
<li><code>btn.onclick = function() &#123;&#125; </code></li>
<li>特点： <strong>注册事件的唯一性</strong></li>
<li><strong>同一个元素同一个事件只能设置一个处理函数</strong>，最后注册的处理函数将<strong>会覆盖</strong>前面注册的处理函数</li>
</ul>
<h4 id="方法监听注册方式"><a href="#方法监听注册方式" class="headerlink" title="方法监听注册方式:"></a>方法监听注册方式:</h4><ul>
<li><strong>w3c 标准</strong> 推荐方式</li>
<li><code>addEventListener()</code> 它是一个<strong>方法</strong></li>
<li>IE9 之前的 IE 不支持此方法，可使用 <code>attachEvent()</code> 代替</li>
<li>特点：<strong>同一个元素同一个事件可以注册多个监听器</strong></li>
<li>按注册<strong>顺序依次执行</strong></li>
</ul>
<hr>
</li>
<li><h3 id="addEventListener-事件监听方式"><a href="#addEventListener-事件监听方式" class="headerlink" title="addEventListener 事件监听方式:"></a><code>addEventListener</code> 事件监听方式:</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">eventTarget.addEventListener(type, listener[, useCapture])</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong><code>eventTarget.addEventListener()</code>**方法将指定的监听器注册到 <code>eventTarget</code>**（目标对象）</strong>上，当该对象触发指定的事件时，就会执行事件处理函数。</p>
</blockquote>
<h4 id="该方法接收三个参数："><a href="#该方法接收三个参数：" class="headerlink" title="该方法接收三个参数："></a>该方法接收三个参数：</h4><ul>
<li><strong><code>type</code>**：</strong>事件类型字符串**，比如 <code>click 、mouseover</code> ，注意这里不要带 <code>on</code></li>
<li><strong><code>listener</code>**：</strong>事件处理函数**，事件发生时，会调用该监听函数</li>
<li><strong><code>useCapture</code>**：</strong>可选参数，是一个布尔值**，默认是 <code>false</code>。学完 DOM 事件流后，再进一步说明</li>
</ul>
<hr>
</li>
<li><h3 id="attachEvent-事件监听方式"><a href="#attachEvent-事件监听方式" class="headerlink" title="attachEvent 事件监听方式:"></a><code>attachEvent</code> 事件监听方式:</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">eventTarget.attachEvent(eventNameWithOn, callback)</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong><code>eventTarget.attachEvent()</code>**方法将指定的监听器注册到 <code>eventTarget</code>**（目标对象）</strong> 上，当该对象触发指定的事件时，指定的回调函数就会被执行。</p>
</blockquote>
<p>####　该方法接收两个参数：</p>
<ul>
<li><code>eventNameWithOn</code>：<strong>事件类型字符串</strong>，比如 <code>onclick 、onmouseover</code> ，这里要带 on</li>
<li><code>callback</code>： <strong>事件处理函数</strong>，当目标触发事件时回调函数被调用</li>
</ul>
<h4 id="注意：IE8-及早期版本支持"><a href="#注意：IE8-及早期版本支持" class="headerlink" title="注意：IE8 及早期版本支持"></a>注意：IE8 及早期版本支持</h4><hr>
</li>
<li><h3 id="注册事件兼容性解决方案"><a href="#注册事件兼容性解决方案" class="headerlink" title="注册事件兼容性解决方案:"></a>注册事件兼容性解决方案:</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addEventListener</span>(<span class="params">element, eventName, fn</span>) </span>&#123;</span><br><span class="line">     <span class="comment">// 判断当前浏览器是否支持 addEventListener 方法</span></span><br><span class="line">     <span class="keyword">if</span> (element.addEventListener) &#123;</span><br><span class="line">       element.addEventListener(eventName, fn);  <span class="comment">// 第三个参数 默认是false</span></span><br><span class="line">     &#125; <span class="keyword">else</span> <span class="keyword">if</span> (element.attachEvent) &#123;</span><br><span class="line">       element.attachEvent(<span class="string">&#x27;on&#x27;</span> + eventName, fn);</span><br><span class="line">     &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">       <span class="comment">// 相当于 element.onclick = fn;</span></span><br><span class="line">       element[<span class="string">&#x27;on&#x27;</span> + eventName] = fn;</span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>

<h4 id="兼容性处理的原则：-首先照顾大多数浏览器，再处理特殊浏览器"><a href="#兼容性处理的原则：-首先照顾大多数浏览器，再处理特殊浏览器" class="headerlink" title="兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器"></a>兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器</h4></li>
</ul>
<hr>
<ul>
<li><p>##　删除事件（解绑事件）：</p>
<ul>
<li><h3 id="删除事件的方式"><a href="#删除事件的方式" class="headerlink" title="删除事件的方式:"></a>删除事件的方式:</h3><ul>
<li><h4 id="传统注册方式-1"><a href="#传统注册方式-1" class="headerlink" title="传统注册方式:"></a>传统注册方式:</h4></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">eventTarget.onclick = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>

<hr>
<ul>
<li><h4 id="方法监听注册方式-1"><a href="#方法监听注册方式-1" class="headerlink" title="方法监听注册方式:"></a>方法监听注册方式:</h4></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="number">1.</span> eventTarget.removeEventListener(type, listener[, useCapture]);</span><br><span class="line"><span class="number">2.</span> eventTarget.detachEvent(eventNameWithOn, callback);</span><br></pre></td></tr></table></figure>

<hr>
</li>
<li><h3 id="删除事件兼容性解决方案"><a href="#删除事件兼容性解决方案" class="headerlink" title="删除事件兼容性解决方案:"></a>删除事件兼容性解决方案:</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeEventListener</span>(<span class="params">element, eventName, fn</span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 判断当前浏览器是否支持 removeEventListener 方法</span></span><br><span class="line">      <span class="keyword">if</span> (element.removeEventListener) &#123;</span><br><span class="line">        element.removeEventListener(eventName, fn);  <span class="comment">// 第三个参数 默认是false</span></span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (element.detachEvent) &#123;</span><br><span class="line">        element.detachEvent(<span class="string">&#x27;on&#x27;</span> + eventName, fn);</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        element[<span class="string">&#x27;on&#x27;</span> + eventName] = <span class="literal">null</span>;</span><br><span class="line"> &#125; </span><br></pre></td></tr></table></figure>


</li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><h2 id="DOM-事件流"><a href="#DOM-事件流" class="headerlink" title="DOM 事件流:"></a>DOM 事件流:</h2><blockquote>
<p><strong>事件流</strong>描述的是<strong>从页面中接收事件的顺序</strong>。<br><strong>事件</strong>发生时会在元素节点之间按照特定的顺序传播，这个<strong>传播过程即 DOM 事件流</strong>。</p>
</blockquote>
<ul>
<li><h4 id="比如我们给一个div-注册了点击事件："><a href="#比如我们给一个div-注册了点击事件：" class="headerlink" title="比如我们给一个div 注册了点击事件："></a>比如我们给一个div 注册了点击事件：</h4><ul>
<li><p><strong>DOM 事件流分为3个阶段：</strong></p>
<ol>
<li>捕获阶段</li>
<li>当前目标阶段</li>
<li>冒泡阶段</li>
</ol>
<p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/N@PVkdg1oD^E.png" alt="DOM 事件流分为3个阶段"></p>
</li>
<li><p><strong>事件冒泡：</strong> <strong>IE 最早提出</strong>，事件开始时由最具体的元素接收，然后<strong>逐级向上传播到到 DOM 最顶层节点</strong>的过程。</p>
</li>
<li><p><strong>事件捕获：</strong> <strong>网景最早提出</strong>，由 DOM 最顶层节点开始，然后<strong>逐级向下传播到到最具体的元素</strong>接收的过程。</p>
</li>
</ul>
<blockquote>
<p><strong>比如:</strong></p>
<p>我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。 </p>
</blockquote>
<p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/4At!R*LSzT!w.png" alt="DOM 事件流"></p>
<blockquote>
<p>事件发生时会在<strong>元素节点之间</strong>按照特定的顺序传播，这个传播过程<strong>即 DOM 事件流</strong>。</p>
</blockquote>
<h4 id="注意"><a href="#注意" class="headerlink" title="注意:"></a>注意:</h4><ol>
<li>JS 代码中<strong>只能</strong>执行<strong>捕获或者冒泡</strong>其中的一个阶段。</li>
<li><code>onclick</code> 和 <code>attachEvent</code> 只能得到<strong>冒泡阶段</strong>。</li>
<li><code>addEventListener(type, listener[, useCapture])</code>第三个参数如果是 <code>true</code>，<strong>表示在事件捕获阶段调事件处理程序</strong>；如果是 <code>false（不写默认就是false）</code>，<strong>表示在事件冒泡阶段调用事件处理程序</strong>。</li>
<li>实际开发中我们很少使用事件捕获，我们<strong>更关注事件冒泡</strong>。</li>
<li><strong>有些事件是没有冒泡的</strong>，比如 <code>onblur</code>、<code>onfocus</code>、<code>onmouseenter</code>、<code>onmouseleave</code></li>
<li>事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。</li>
</ol>
</li>
</ul>
<hr>
</li>
<li><h2 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象:"></a>事件对象:</h2><ul>
<li><h3 id="什么是事件对象"><a href="#什么是事件对象" class="headerlink" title="什么是事件对象:"></a>什么是事件对象:</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">eventTarget.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;&#125; </span><br><span class="line">eventTarget.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;&#125;）</span><br><span class="line"><span class="comment">// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt </span></span><br></pre></td></tr></table></figure>

<ul>
<li><strong>官方解释：</strong><code>event</code> <strong>对象代表事件的状态</strong>，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。</li>
<li><strong>简单理解：</strong>事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 <code>event</code>，它<strong>有很多属性和方法</strong>。</li>
</ul>
<h4 id="比如："><a href="#比如：" class="headerlink" title="比如："></a>比如：</h4><ul>
<li>谁绑定了这个事件。</li>
<li>鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。</li>
<li>键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。</li>
</ul>
<hr>
</li>
<li><h3 id="事件对象的使用语法："><a href="#事件对象的使用语法：" class="headerlink" title="事件对象的使用语法："></a>事件对象的使用语法：</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">eventTarget.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt </span></span><br><span class="line"> &#125; </span><br><span class="line"> eventTarget.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">   <span class="comment">// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt </span></span><br><span class="line"> &#125;）</span><br></pre></td></tr></table></figure>

<ul>
<li>这个 <code>event</code>  是个<strong>形参</strong>，系统帮我们设定为事件对象，<strong>不需要传递实参过去</strong>。</li>
<li>当我们注册事件时， <code>event</code> 对象就会<strong>被系统自动创建</strong>，并<strong>依次传递给事件监听器（事件处理函数）</strong>。</li>
</ul>
<hr>
</li>
<li><h3 id="事件对象的兼容性方案"><a href="#事件对象的兼容性方案" class="headerlink" title="事件对象的兼容性方案:"></a>事件对象的兼容性方案:</h3><h4 id="事件对象本身的获取存在兼容问题："><a href="#事件对象本身的获取存在兼容问题：" class="headerlink" title="事件对象本身的获取存在兼容问题："></a>事件对象本身的获取存在兼容问题：</h4><ul>
<li><strong>标准浏览器</strong>中是浏览器给方法传递的参数，只需要定义形参 <code>e</code> 就可以获取到。</li>
<li><strong>在 IE6~8 中</strong>，浏览器不会给方法传递参数，如果需要的话，需要到 <code>window.event</code> 中获取查找。</li>
</ul>
<h4 id="解决"><a href="#解决" class="headerlink" title="解决:"></a>解决:</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">e = e || <span class="built_in">window</span>.event;</span><br></pre></td></tr></table></figure>

<hr>
</li>
<li><h3 id="事件对象的常见属性和方法"><a href="#事件对象的常见属性和方法" class="headerlink" title="事件对象的常见属性和方法:"></a>事件对象的常见属性和方法:</h3><h4 id="e-target-和-this-的区别："><a href="#e-target-和-this-的区别：" class="headerlink" title="e.target 和 this 的区别："></a><code>e.target</code> 和 <code>this</code> 的区别：</h4><ul>
<li><code>this</code> 是<strong>事件绑定的元素</strong>， 这个函数的调用者（绑定这个事件的元素）<br>  <code>e.target</code> 是<strong>事件触发的元素</strong>。</li>
</ul>
<table>
<thead>
<tr>
<th align="center">事件对象属性方法</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">e.target</td>
<td align="center">返回触发事件的对象                 标准</td>
</tr>
<tr>
<td align="center">e.srcElement</td>
<td align="center">返回触发事件的对象                       非标准ie6-8使用</td>
</tr>
<tr>
<td align="center">e.type</td>
<td align="center">返回事件的类型比如click mouseover不带on</td>
</tr>
<tr>
<td align="center">e.cancelBubble</td>
<td align="center">该属性阻止冒泡   非标准ie6-8使用</td>
</tr>
<tr>
<td align="center">e.returnValue</td>
<td align="center">该属性阻止默认事件（默认行为）非标准ie6-8使用比如不让链接跳转</td>
</tr>
<tr>
<td align="center">e.preventDefault()</td>
<td align="center">该方法阻止默认事件（默认行为)     标准比如不让链接跳转</td>
</tr>
<tr>
<td align="center">e.stopPropagation()</td>
<td align="center">阳止冒泡标准</td>
</tr>
</tbody></table>
</li>
</ul>
<hr>
</li>
<li><h2 id="阻止事件冒泡"><a href="#阻止事件冒泡" class="headerlink" title="阻止事件冒泡:"></a>阻止事件冒泡:</h2><ul>
<li><h3 id="阻止事件冒泡的两种方式"><a href="#阻止事件冒泡的两种方式" class="headerlink" title="阻止事件冒泡的两种方式:"></a>阻止事件冒泡的两种方式:</h3><ul>
<li><strong>事件冒泡：</strong>开始时由最具体的元素接收，然后<strong>逐级向上传播到到 DOM 最顶层节点</strong>。</li>
<li>事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。</li>
</ul>
<h4 id="阻止事件冒泡-1"><a href="#阻止事件冒泡-1" class="headerlink" title="阻止事件冒泡:"></a>阻止事件冒泡:</h4><ul>
<li><strong>标准写法：</strong>利用事件对象里面的 <code>stopPropagation()</code>方法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">e.stopPropagation() </span><br></pre></td></tr></table></figure>

<ul>
<li><strong>非标准写法：</strong>IE 6-8  利用事件对象 <code>cancelBubble</code> 属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">e.cancelBubble = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>

<hr>
</li>
<li><h3 id="阻止事件冒泡的兼容性解决方案"><a href="#阻止事件冒泡的兼容性解决方案" class="headerlink" title="阻止事件冒泡的兼容性解决方案:"></a>阻止事件冒泡的兼容性解决方案:</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span>(e &amp;&amp; e.stopPropagation)&#123;</span><br><span class="line">      e.stopPropagation();</span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      <span class="built_in">window</span>.event.cancelBubble = <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<hr>
</li>
<li><h3 id="事件委托（代理、委派）"><a href="#事件委托（代理、委派）" class="headerlink" title="事件委托（代理、委派）:"></a>事件委托（代理、委派）:</h3><ul>
<li>事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景：</li>
</ul>
<blockquote>
<p>咱们班有100个学生， 快递员有100个快递， 如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？</p>
<p><strong>解决方案：</strong>  快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。</p>
<p><strong>优势：</strong>快递员省事，委托给班主任就可以走了。 同学们领取也方便，因为相信班主任。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">        &lt;li&gt;知否知否，应该有弹框在手&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;知否知否，应该有弹框在手&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;知否知否，应该有弹框在手&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;知否知否，应该有弹框在手&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;知否知否，应该有弹框在手&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>点击每个 <code>li</code> 都会弹出对话框，<strong>以前需要给每个 <code>li</code> 注册事件</strong>，是非常辛苦的，<strong>而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间</strong>。</li>
</ul>
<h4 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托:"></a>事件委托:</h4><p>事件委托也称为<strong>事件代理</strong>， 在 <code>jQuery</code> 里面称为<strong>事件委派</strong>。</p>
<h4 id="事件委托的原理"><a href="#事件委托的原理" class="headerlink" title="事件委托的原理:"></a>事件委托的原理:</h4><ul>
<li><strong>不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。</strong></li>
<li>以上案例：给 <code>ul </code>注册点击事件，然后利用事件对象的 <code>target</code> 来找到当前点击的 <code>li</code>，因为点击 <code>li</code>，事件会冒泡到 <code>ul</code> 上， <code>ul</code> 有注册事件，<strong>就会触发事件监听器</strong>。</li>
</ul>
<h4 id="事件委托的作用"><a href="#事件委托的作用" class="headerlink" title="事件委托的作用:"></a>事件委托的作用:</h4><p>我们<strong>只操作了一次 DOM</strong> ，提高了程序的性能。</p>
</li>
</ul>
<hr>
</li>
<li><h2 id="常用的鼠标事件"><a href="#常用的鼠标事件" class="headerlink" title="常用的鼠标事件:"></a>常用的鼠标事件:</h2><table>
<thead>
<tr>
<th align="center">鼠标事件</th>
<th align="center">触发条件</th>
</tr>
</thead>
<tbody><tr>
<td align="center">onclick</td>
<td align="center">鼠标点击左键触发</td>
</tr>
<tr>
<td align="center">onmouseover</td>
<td align="center">鼠标经过触发</td>
</tr>
<tr>
<td align="center">onmouseout</td>
<td align="center">鼠标离开触发</td>
</tr>
<tr>
<td align="center">onfocus</td>
<td align="center">获得鼠标焦点触发</td>
</tr>
<tr>
<td align="center">onblur</td>
<td align="center">失去鼠标焦点触发</td>
</tr>
<tr>
<td align="center">onmousemove</td>
<td align="center">鼠标移动触发</td>
</tr>
<tr>
<td align="center">onmouseup</td>
<td align="center">鼠标弹起触发</td>
</tr>
<tr>
<td align="center">onmcusedown</td>
<td align="center">鼠标按下触发</td>
</tr>
</tbody></table>
<ol>
<li><p><strong>禁止鼠标右键菜单</strong></p>
<ul>
<li><code>contextmenu</code>主要控制<strong>应该何时显示上下文菜单</strong>，主要用于<strong>程序员取消默认的上下文菜单</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;contextmenu&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    e.preventDefault();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>禁止鼠标选中（<code>selectstart</code> 开始选中）</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;selectstart&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    e.preventDefault();</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


</li>
</ol>
</li>
</ul>
<hr>
<ul>
<li><h2 id="鼠标事件对象"><a href="#鼠标事件对象" class="headerlink" title="鼠标事件对象:"></a>鼠标事件对象:</h2><ul>
<li><code>event</code>对象代表<strong>事件的状态</strong>，跟事件相关的一系列信息的集合。现阶段我们主要是用**鼠标事件对象 <code>MouseEvent</code> 和键盘事件对象 <code>KeyboardEvent</code>**。</li>
</ul>
<table>
<thead>
<tr>
<th align="center">鼠标事件对象</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">e.clientX</td>
<td align="center">返回鼠标相对于浏览器窗口可视区的×坐标</td>
</tr>
<tr>
<td align="center">e.clientY</td>
<td align="center">返回鼠际相对于浏览器窗口可视区的Y坐标</td>
</tr>
<tr>
<td align="center">e.pagex</td>
<td align="center">返回鼠标相对于文档页面的×坐标IE9+，支持</td>
</tr>
<tr>
<td align="center">e.pageY</td>
<td align="center">返回鼠际相对于文档页面的Y坐标IE9+支持</td>
</tr>
<tr>
<td align="center">e.screenX</td>
<td align="center">返回鼠标相对于电脑屏幕的×坐标</td>
</tr>
<tr>
<td align="center">e.screenY</td>
<td align="center">返回鼠标相对于电脑屏幕的Y坐标</td>
</tr>
</tbody></table>
<ul>
<li><h3 id="案例："><a href="#案例：" class="headerlink" title="案例："></a>案例：</h3><ul>
<li>跟随鼠标的图片</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> pic = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;img&#x27;</span>);</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;mousemove&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = e.pageX;</span><br><span class="line">    <span class="keyword">var</span> y = e.pageY;</span><br><span class="line">    pic.style.top = y - 图片宽的一半 + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">    pic.style.left = x - 图片长的一半 + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="效果"><a href="#效果" class="headerlink" title="效果:"></a>效果:</h4><p><img src= "/img/loading.gif" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/O!Vb8dde1ePJ.gif" alt="效果图"></p>
</li>
</ul>
<hr>
</li>
<li><h2 id="常用的键盘事件："><a href="#常用的键盘事件：" class="headerlink" title="常用的键盘事件："></a>常用的键盘事件：</h2><ul>
<li><h3 id="常用键盘事件："><a href="#常用键盘事件：" class="headerlink" title="常用键盘事件："></a>常用键盘事件：</h3><ul>
<li>事件除了使用鼠标触发，还可以使用键盘触发。</li>
</ul>
<table>
<thead>
<tr>
<th align="center">键盘事件</th>
<th align="center">触发条件</th>
</tr>
</thead>
<tbody><tr>
<td align="center">onkeyup</td>
<td align="center">某个键盘按键被松开时触发</td>
</tr>
<tr>
<td align="center">onkeydown</td>
<td align="center">某个键盘按键被按下时触发</td>
</tr>
<tr>
<td align="center">onkeypress</td>
<td align="center">某个键盘按键被按下时触发︰但是它不识别功能键比如ctrl shif箭头等</td>
</tr>
</tbody></table>
<h4 id="注意："><a href="#注意：" class="headerlink" title="注意："></a>注意：</h4><ol>
<li>如果使用<code>addEventListener</code> <strong>不需要加</strong> <code>on</code></li>
<li><code>onkeypress</code> 和前面2个的区别是，**它不识别功能键，比如左右箭头，shift **等。</li>
<li><strong>三个事件的执行顺序是： <code>keydown</code> –  <code>keypress</code>  — <code>keyup</code></strong></li>
</ol>
<hr>
</li>
<li><h3 id="键盘事件对象"><a href="#键盘事件对象" class="headerlink" title="键盘事件对象:"></a>键盘事件对象:</h3><table>
<thead>
<tr>
<th align="center">键盘事件对象属性</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">keyCode</td>
<td align="center">返回该键的ASCII值</td>
</tr>
</tbody></table>
<h4 id="注意：-1"><a href="#注意：-1" class="headerlink" title="注意："></a>注意：</h4><p><code>onkeydown</code> 和 <code>onkeyup</code>  <strong>不区分字母大小写</strong>，<code>onkeypress</code> <strong>区分字母大小写</strong>。<br>在我们实际开发中，我们<strong>更多的使用<code>keydown</code>和<code>keyup</code>， 它能识别所有的键（包括功能键）<br><code>Keypress</code> 不识别功能键，但是<code>keyCode</code>属性能区分大小写，返回不同的ASCII值</strong></p>
</li>
</ul>
</li>
</ul>
<hr>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">六根清静</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://liugenqingjing2.coding.me/2020/09/19/JavaScript%E7%9F%A5%E8%AF%86%E7%82%B9%E6%80%BB%E7%BB%93-%E5%8D%81%E4%BA%8C-JavaScript%E4%B9%8BDOM%E4%BA%8B%E4%BB%B6%E6%B5%81%E9%AB%98%E7%BA%A7/">https://liugenqingjing2.coding.me/2020/09/19/JavaScript知识点总结-十二-JavaScript之DOM事件流高级/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://liugenqingjing2.coding.me" target="_blank">小何blog (记录美好)</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E7%B3%BB%E5%88%97%F0%9F%8F%AC/">系列🏬</a><a class="post-meta__tags" href="/tags/JavaScript/">JavaScript</a><a class="post-meta__tags" href="/tags/DOM/">DOM</a><a class="post-meta__tags" href="/tags/%E4%BA%8B%E4%BB%B6%E6%B5%81/">事件流</a></div><div class="post_share"><div class="social-share" data-image="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/y20guKZQbANB.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏<div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="http://qew58kkb2.hn-bkt.clouddn.com/wechat%20%20%281%29.png" target="_blank"><img class="post-qr-code-img" data-lazy-src="http://qew58kkb2.hn-bkt.clouddn.com/wechat%20%20%281%29.png" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li></ul></div></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2020/09/19/%E5%BF%AB%E9%80%92%E5%8D%95%E5%8F%B7%E6%9F%A5%E8%AF%A2/"><img class="prev-cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200919/t@mgT8dBJ@xG.jpg" onerror="onerror=null;src='/img/404.jpg'"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">快递单号查询</div></div></a></div><div class="next-post pull-right"><a href="/2020/09/18/%E7%AE%80%E6%98%93%E7%95%99%E8%A8%80%E6%9D%BF/"><img class="next-cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200918/s*SrET41MudM.jpg" onerror="onerror=null;src='/img/404.jpg'"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">简易留言板</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2020/09/17/JavaScript知识点总结-十-JavaScript之DOM-上/" title="JavaScript知识点总结(十.JavaScript之DOM(上))"><img class="cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200917/LiYs8RZmyEED.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-09-17</div><div class="title">JavaScript知识点总结(十.JavaScript之DOM(上))</div></div></a></div><div><a href="/2020/09/18/JavaScript知识点总结-十一-JavaScript之DOM-下/" title="JavaScript知识点总结(十一.JavaScript之DOM(下))"><img class="cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200918/QKmMeTVYLuKR.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-09-18</div><div class="title">JavaScript知识点总结(十一.JavaScript之DOM(下))</div></div></a></div><div><a href="/2020/09/17/JavaScript知识点总结-九-JavaScript的Web-APIs简介/" title="JavaScript知识点总结(九.JavaScript的Web APIs简介)"><img class="cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200917/7cKUzRmy@FxZ.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-09-17</div><div class="title">JavaScript知识点总结(九.JavaScript的Web APIs简介)</div></div></a></div><div><a href="/2020/09/13/JavaScript知识点总结-七-JavaScript预解析和对象/" title="JavaScript知识点总结(七.JavaScript预解析和对象)"><img class="cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20200913/WKp@vPE1Cm1Z.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-09-13</div><div class="title">JavaScript知识点总结(七.JavaScript预解析和对象)</div></div></a></div><div><a href="/2020/10/10/JavaScript知识点总结-二十-JavaScript之正则表达式/" title="JavaScript知识点总结(二十.JavaScript之正则表达式)"><img class="cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20201010/QbU2o0zob3F@.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-10-10</div><div class="title">JavaScript知识点总结(二十.JavaScript之正则表达式)</div></div></a></div><div><a href="/2020/09/05/JavaScript知识点总结-二-JavaScript简介/" title="JavaScript知识点总结(二.JavaScript简介)"><img class="cover" data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/文章bg/v2-fdfecf9ae52fea38652fdc86757173a6_r.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-09-05</div><div class="title">JavaScript知识点总结(二.JavaScript简介)</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside_content" id="aside_content"><div class="card-widget card-info"><div class="card-content"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="http://01.027cgb.com/632500/1576904533264.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">六根清静</div><div class="author-info__description">记录美好，记录生活，记录学习</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">138</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">63</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/he_chaoming/dashboard/projects?scope=public&amp;&amp;sort="><i class="fab fa-gofore"></i><span>My Gitee</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/he1213114428" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:484695754@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="tencent://message/?uin=484695754" target="_blank" title="QQ"><i class="fab fa-qq"></i></a></div></div></div><div class="card-widget card-recent-post"><div id="gamenews"><div class="card-content"><div class="item-headline"><i class="fas fa-cube"></i><span>ROLL资讯</span><i class="fas fa-retweet" @click="changetype(current)" style="float:right;margin-top:8px"></i></div><div class="newsbar"><span v-for="(type, index) in listtype" v-on:click="addClass(index)" v-bind:class="{ listtypeon:index==current}">{{type}}</span></div><div class="aside-list"><div class="aside-list-item" v-for="(news,index) in newsvue"><a class="thumbnail" href="javascript:void(0)" @click="getnewsdata(index)" :title="news.title"><img class="loaded" onerror="this.onerror=null;this.src='/img/404.jpg'" data-ll-status="loaded" :src="news.imgList[0]"/></a><div class="content"><a class="title" href="javascript:void(0)" @click="getnewsdata(index)" :title="news.title">{{news.title}}</a><time>{{news.postTime}}</time></div></div></div></div><div id="newsmodal"><button class="modalclose" @click="hidemodle()">关闭</button><h2>{{newpostvue.title}} </h2><h4>{{newpostvue.ptime}} &nbsp;&nbsp; {{newpostvue.source}}</h4><div v-html="newpostvue.content"></div></div></div></div><div class="card-widget card-shuo"><div class="card-content" style="height:auto;min-height:280px;"><div class="item-headline"><i class="fas fa-comments"></i><span>&#x8BF4;&#x8BF4</span><a id="shuovisualchange" style="cursor:pointer;float:right" onclick="shuovisualchange()">编辑</a></div><div id="artitalk_main" style="width:100%;height:100%;padding:10px"></div></div></div><div class="sticky_layout"></div><div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-paw fa-spin"></i><span>那年今日</span></div><div id="history-news" style="height: 100px;overflow: hidden;"><div id="history-card"></div></div></div></div><div class="card-widget card-announcement"><div class="card-content"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">大学生一枚，软件工程，想做全栈攻城狮，哈哈，有兴趣可以加 QQ:484695754 (也可以点上面的logo)，一起交流学习</div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="card-content"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E9%AB%98%E7%BA%A7%EF%BC%9A"><span class="toc-number">1.</span> <span class="toc-text">事件高级：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6%E6%A6%82%E8%BF%B0"><span class="toc-number">1.0.1.</span> <span class="toc-text">注册事件概述:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%A0%E7%BB%9F%E6%B3%A8%E5%86%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">1.0.1.1.</span> <span class="toc-text">传统注册方式:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E7%9B%91%E5%90%AC%E6%B3%A8%E5%86%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">1.0.1.2.</span> <span class="toc-text">方法监听注册方式:</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#addEventListener-%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E6%96%B9%E5%BC%8F"><span class="toc-number">1.0.2.</span> <span class="toc-text">addEventListener 事件监听方式:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%A5%E6%96%B9%E6%B3%95%E6%8E%A5%E6%94%B6%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0%EF%BC%9A"><span class="toc-number">1.0.2.1.</span> <span class="toc-text">该方法接收三个参数：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#attachEvent-%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E6%96%B9%E5%BC%8F"><span class="toc-number">1.0.3.</span> <span class="toc-text">attachEvent 事件监听方式:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%EF%BC%9AIE8-%E5%8F%8A%E6%97%A9%E6%9C%9F%E7%89%88%E6%9C%AC%E6%94%AF%E6%8C%81"><span class="toc-number">1.0.3.1.</span> <span class="toc-text">注意：IE8 及早期版本支持</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6%E5%85%BC%E5%AE%B9%E6%80%A7%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">1.0.4.</span> <span class="toc-text">注册事件兼容性解决方案:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86%E7%9A%84%E5%8E%9F%E5%88%99%EF%BC%9A-%E9%A6%96%E5%85%88%E7%85%A7%E9%A1%BE%E5%A4%A7%E5%A4%9A%E6%95%B0%E6%B5%8F%E8%A7%88%E5%99%A8%EF%BC%8C%E5%86%8D%E5%A4%84%E7%90%86%E7%89%B9%E6%AE%8A%E6%B5%8F%E8%A7%88%E5%99%A8"><span class="toc-number">1.0.4.1.</span> <span class="toc-text">兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E4%BA%8B%E4%BB%B6%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">1.0.5.</span> <span class="toc-text">删除事件的方式:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BC%A0%E7%BB%9F%E6%B3%A8%E5%86%8C%E6%96%B9%E5%BC%8F-1"><span class="toc-number">1.0.5.1.</span> <span class="toc-text">传统注册方式:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E7%9B%91%E5%90%AC%E6%B3%A8%E5%86%8C%E6%96%B9%E5%BC%8F-1"><span class="toc-number">1.0.5.2.</span> <span class="toc-text">方法监听注册方式:</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E4%BA%8B%E4%BB%B6%E5%85%BC%E5%AE%B9%E6%80%A7%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">1.0.6.</span> <span class="toc-text">删除事件兼容性解决方案:</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM-%E4%BA%8B%E4%BB%B6%E6%B5%81"><span class="toc-number">1.1.</span> <span class="toc-text">DOM 事件流:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AF%94%E5%A6%82%E6%88%91%E4%BB%AC%E7%BB%99%E4%B8%80%E4%B8%AAdiv-%E6%B3%A8%E5%86%8C%E4%BA%86%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%EF%BC%9A"><span class="toc-number">1.1.0.1.</span> <span class="toc-text">比如我们给一个div 注册了点击事件：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F"><span class="toc-number">1.1.0.2.</span> <span class="toc-text">注意:</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.2.</span> <span class="toc-text">事件对象:</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.2.1.</span> <span class="toc-text">什么是事件对象:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%AF%94%E5%A6%82%EF%BC%9A"><span class="toc-number">1.2.1.1.</span> <span class="toc-text">比如：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BD%BF%E7%94%A8%E8%AF%AD%E6%B3%95%EF%BC%9A"><span class="toc-number">1.2.2.</span> <span class="toc-text">事件对象的使用语法：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E6%96%B9%E6%A1%88"><span class="toc-number">1.2.3.</span> <span class="toc-text">事件对象的兼容性方案:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E6%9C%AC%E8%BA%AB%E7%9A%84%E8%8E%B7%E5%8F%96%E5%AD%98%E5%9C%A8%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98%EF%BC%9A"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">事件对象本身的获取存在兼容问题：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">解决:</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95"><span class="toc-number">1.2.4.</span> <span class="toc-text">事件对象的常见属性和方法:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#e-target-%E5%92%8C-this-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9A"><span class="toc-number">1.2.4.1.</span> <span class="toc-text">e.target 和 this 的区别：</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1"><span class="toc-number">1.3.</span> <span class="toc-text">阻止事件冒泡:</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">1.3.1.</span> <span class="toc-text">阻止事件冒泡的两种方式:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1-1"><span class="toc-number">1.3.1.1.</span> <span class="toc-text">阻止事件冒泡:</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E7%9A%84%E5%85%BC%E5%AE%B9%E6%80%A7%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">1.3.2.</span> <span class="toc-text">阻止事件冒泡的兼容性解决方案:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98%EF%BC%88%E4%BB%A3%E7%90%86%E3%80%81%E5%A7%94%E6%B4%BE%EF%BC%89"><span class="toc-number">1.3.3.</span> <span class="toc-text">事件委托（代理、委派）:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98"><span class="toc-number">1.3.3.1.</span> <span class="toc-text">事件委托:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98%E7%9A%84%E5%8E%9F%E7%90%86"><span class="toc-number">1.3.3.2.</span> <span class="toc-text">事件委托的原理:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-number">1.3.3.3.</span> <span class="toc-text">事件委托的作用:</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.4.</span> <span class="toc-text">常用的鼠标事件:</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.5.</span> <span class="toc-text">鼠标事件对象:</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B%EF%BC%9A"><span class="toc-number">1.5.1.</span> <span class="toc-text">案例：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%88%E6%9E%9C"><span class="toc-number">1.5.1.1.</span> <span class="toc-text">效果:</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%EF%BC%9A"><span class="toc-number">1.6.</span> <span class="toc-text">常用的键盘事件：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%EF%BC%9A"><span class="toc-number">1.6.1.</span> <span class="toc-text">常用键盘事件：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%EF%BC%9A"><span class="toc-number">1.6.1.1.</span> <span class="toc-text">注意：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.6.2.</span> <span class="toc-text">键盘事件对象:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%EF%BC%9A-1"><span class="toc-number">1.6.2.1.</span> <span class="toc-text">注意：</span></a></li></ol></li></ol></li></ol></li></ol></div></div></div><div class="card-widget card-recent-post"><div class="card-content"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/03/21/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81%E4%B8%89-%E8%B7%A8%E5%9F%9F%E4%BB%8B%E7%BB%8D%E5%92%8CJSONP%E4%BB%8B%E7%BB%8D/" title="Node.js学习(二十三.跨域介绍和JSONP介绍)"><img data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20210321/qWPEashJOuNK.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node.js学习(二十三.跨域介绍和JSONP介绍)"/></a><div class="content"><a class="title" href="/2021/03/21/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81%E4%B8%89-%E8%B7%A8%E5%9F%9F%E4%BB%8B%E7%BB%8D%E5%92%8CJSONP%E4%BB%8B%E7%BB%8D/" title="Node.js学习(二十三.跨域介绍和JSONP介绍)">Node.js学习(二十三.跨域介绍和JSONP介绍)</a><time datetime="2021-03-21T13:40:58.000Z" title="发表于 2021-03-21 21:40:58">2021-03-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/20/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81%E4%BA%8C-Node-js%E9%A1%B9%E7%9B%AE%E6%B5%81%E7%A8%8B-%E4%B8%8B/" title="Node.js学习(二十二.Node.js项目流程(下))"><img data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20210320/CvAoe6kC5*f2.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node.js学习(二十二.Node.js项目流程(下))"/></a><div class="content"><a class="title" href="/2021/03/20/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81%E4%BA%8C-Node-js%E9%A1%B9%E7%9B%AE%E6%B5%81%E7%A8%8B-%E4%B8%8B/" title="Node.js学习(二十二.Node.js项目流程(下))">Node.js学习(二十二.Node.js项目流程(下))</a><time datetime="2021-03-20T14:33:29.000Z" title="发表于 2021-03-20 22:33:29">2021-03-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/15/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81%E4%B8%80-Node-js%E9%A1%B9%E7%9B%AE%E6%B5%81%E7%A8%8B-%E4%B8%AD/" title="Node.js学习(二十一.Node.js项目流程(中))"><img data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20210320/gSrAfCznw@^F.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node.js学习(二十一.Node.js项目流程(中))"/></a><div class="content"><a class="title" href="/2021/03/15/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81%E4%B8%80-Node-js%E9%A1%B9%E7%9B%AE%E6%B5%81%E7%A8%8B-%E4%B8%AD/" title="Node.js学习(二十一.Node.js项目流程(中))">Node.js学习(二十一.Node.js项目流程(中))</a><time datetime="2021-03-15T04:35:12.000Z" title="发表于 2021-03-15 12:35:12">2021-03-15</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/14/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81-Node-js%E9%A1%B9%E7%9B%AE%E6%B5%81%E7%A8%8B(%E4%B8%8A)/" title="Node.js学习(二十.Node.js项目流程(上))"><img data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20210320/UMp@B^akHmf8.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node.js学习(二十.Node.js项目流程(上))"/></a><div class="content"><a class="title" href="/2021/03/14/Node-js%E5%AD%A6%E4%B9%A0-%E4%BA%8C%E5%8D%81-Node-js%E9%A1%B9%E7%9B%AE%E6%B5%81%E7%A8%8B(%E4%B8%8A)/" title="Node.js学习(二十.Node.js项目流程(上))">Node.js学习(二十.Node.js项目流程(上))</a><time datetime="2021-03-14T14:36:58.000Z" title="发表于 2021-03-14 22:36:58">2021-03-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/02/27/Node-js%E5%AD%A6%E4%B9%A0-%E5%8D%81%E4%B9%9D-%E5%B0%81%E8%A3%85%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93%E5%92%8CCSRF/" title="Node.js学习(十九.封装操作数据库和CSRF)"><img data-lazy-src="https://gitee.com/he_chaoming/blog_tuchuang/raw/master/20210227/EcgLTE4WPOp^.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Node.js学习(十九.封装操作数据库和CSRF)"/></a><div class="content"><a class="title" href="/2021/02/27/Node-js%E5%AD%A6%E4%B9%A0-%E5%8D%81%E4%B9%9D-%E5%B0%81%E8%A3%85%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E5%BA%93%E5%92%8CCSRF/" title="Node.js学习(十九.封装操作数据库和CSRF)">Node.js学习(十九.封装操作数据库和CSRF)</a><time datetime="2021-02-27T13:20:18.000Z" title="发表于 2021-02-27 21:20:18">2021-02-27</time></div></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2021 By 六根清静</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">Hi,  welcome  to  my  <a  href="">blog</a>!</div><div class="icp"><a><img class="icp-icon" src="/img/icp.png" alt="ICP"/><span>豫ICP备2020025430号</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="rightside.chat_btn"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module" defer></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script async="async">var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> {preloader.endLoading()})
setTimeout(function(){preloader.endLoading();}, 50000);</script><div class="js-pjax"><script>function loadValine () {
  function initValine () {
    let initData = {
      el: '#vcomment',
      appId: 'kW2ft895T235y7DxmyJmXX5X-MdYXbMMI',
      appKey: 'v0zBPCAdwiJ0xg4s4eSfusLD',
      placeholder: '建议使用QQ邮箱，评论头像采用QQ头像',
      avatar: 'monsterid',
      meta: 'nick,mail,link'.split(','),
      pageSize: '10',
      lang: 'zh-CN',
      recordIP: false,
      serverURLs: 'https://???????.api.lncldglobal.com',
      emojiCDN: '',
      emojiMaps: "",
      enableQQ: true,
      path: window.location.pathname,
      master: '1f76478c4ec918ffc6d50de6b68db531'.split(','),
      friends: '5c?????bfe6rfc72a????e268ad3819c,7c?????bfe65fc02a????e2????3919c'.split(','),
      tagMeta: '博主,小伙伴,访客'.split(',')
    }

    if (true) { 
      initData.requiredFields= ('nick,mail'.split(','))
    }
    
    if (false) {
      const otherData = false
      initData = Object.assign({}, initData, otherData)
    }
    
    const valine = new Valine(initData)
  }

  if (typeof Valine === 'function') initValine() 
  else $.getScript('https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js', initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.querySelector('#vcomment'),loadValine)
  else setTimeout(() => loadValine(), 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script src='https://cdn.jsdelivr.net/npm/artitalk'></script><script> $(".category-list-count").prepend("<i class=\"fas fa-book\"></i>");</script><script src="/js/list.js"></script><script src="/js/gitcalendar.js"></script><script src="/js/calendar.js"></script><script src="/js/xkTool.js"></script><script src="/js/pjax.js"></script><script src="/magnet/js/vue.min.js"></script><script src="/magnet/js/catalogMagnet.js"></script><script src="/js/airvisualapi.js"></script><script src="/js/history.js"></script><script src="/js/historyroll.js"></script><script src="/js/change.js"></script><script type="text/javascript" src="https://www.airvisual.com/scripts/widget_v2.0.js"></script><script> setTimeout(function(){$('.monoline').eq(0).html($(".monoline strong").eq(0).text().replace('°','℃'));},5000);</script><script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js"></script><script src="/js/myBg.js"></script><script src="/js/shuo.js"></script><script src="/js/artitalkkey.js"></script><script src="/news/js/keys.js"></script><script src="/news/js/news.js"></script><script src="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/js/pool.min.js"><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="/stars/stars.js"></script><script src="https://cdn1.lncld.net/static/js/3.5.0/av-min.js"></script><script src="/zan/zan.js"></script><div class="aplayer no-destroy" data-id="2916766519" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="false" muted></div><script src="/swiper/swiper.min.js"></script><script src="/swiper/swiperindex.js"></script><script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="/js/third-party/fireworks.js"></script><script src="/js/third-party/activate-power-mode.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/6fdec148.js","daovoice")
</script><script>var isChatBtn = true
daovoice('init', {
  app_id: '6fdec148',},{
  launcher: { 
     disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示
  },
});
daovoice('update');

if (isChatBtn) {
  var chatBtnFn = () => {
    var chatBtn = document.getElementById("chat_btn")
    chatBtn.addEventListener("click", function(){
      daovoice('show')
    });
  }
  chatBtnFn()
} else {
  if (true) {
    function chatBtnHide () {
      daovoice('update', {},{
        launcher: { 
        disableLauncherIcon: true // 悬浮 ICON 是否显示
        },
      });
    }
    function chatBtnShow () {
      daovoice('update', {},{
        launcher: { 
        disableLauncherIcon: false // 悬浮 ICON 是否显示
        },
      });
    }
  }
}</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/live2dw/assets/unitychan.model.json"},"display":{"superSample":2,"width":150,"height":300,"position":"right","hOffset":0,"vOffset":-20},"mobile":{"show":true,"scale":0.6},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body></html>